<!-- 登录页面 -->
<template>
  <div class="bg">
    <div class="login-container">
      <div class="login">
        <div class="item">
          <div class="tit">戈睿葡恩后台管理系统</div>
        </div>
        <div class="item">
          <div class="title">账号：</div>
          <el-input class="input" v-model="userName" placeholder="请输入账号"></el-input>
        </div>
        <div class="item">
          <div class="title">密码：</div>
          <el-input class="input" placeholder="请输入密码" v-model="password" show-password></el-input>
        </div>
        <!-- <div class="forget" style="  opacity: 1;"><el-link type="primary">忘记密码</el-link></div> -->
        <div class="btn">
          <!-- <router-link to="/"> -->
          <el-button class="b" type="primary" @click="login">登录</el-button>
          <!-- </router-link> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue'
import { useRouter } from "vue-router";
const router = useRouter();
const { proxy } = getCurrentInstance();

let userName = ref('')
let password = ref('')

const login = async () => {
  if (userName.value === '' || password.value === '') {
    proxy.$msg({
      type: 'error',
      message: '请填写用户名密码',
    })
  } else {
    console.log('cdscsdcndksjcksdvbfdjv')
    proxy.$api.home.login({
      username: userName.value,
      password: password.value,
      captcha: '1',
      uuid: '1',
    }).then(res => {
      localStorage.setItem("token", res.data.token);
      proxy.$api.home.menu().then(resMenu => {
        console.log('resMenu', resMenu);
        localStorage.setItem("menuList", JSON.stringify(resMenu.data));
        if (resMenu.data.length > 0) {
          router.push({ path: '/home' });
        }
      })

    })
  }

}

</script>
<style lang="scss" scoped>
.bg {
  width: 100%;
  height: 100vh;
  background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_match%2F0%2F11695386033%2F0.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640871523&t=becd10a53c39e20a51ae560d650d48a6");
  background-size: 100% 100%;
  position: relative;
  box-sizing: border-box;

  .login-container {
    position: absolute;
    left: 50%;
    top: 36%;
    transform: translateX(-50%);
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    width: 400px;
    background-color: #ffffff;

    .login {
      width: 300px;
      // height: 300px;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      // background-color:salmon;

      .tit {
        font-weight: 600;
        font-size: 25px;
        // margin-bottom: 10px;
      }

      .forget {
        width: 90%;
        height: 20px;
        display: flex;
        justify-content: flex-end;
        font-size: 12px;
        color: blue;
        margin-top: 10px;
        // background-color: salmon;
      }

      .btn {
        margin: 8px 0 20px 0;
        width: 90%;
        height: 40px;

        // background-color: sandybrown;
        .b {
          width: 100%;
        }
      }

      .item {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        width: 100%;
        margin-top: 15px;

        .title {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 20%;
          font-size: 16px;
        }

        .input {
          width: 70%;
        }
      }

    }
  }
}
</style>
